<template>
  <el-table
    class="main-table"
    :data="copyTableData"
    style="width: 100%"
    size="small"
    header-row-class-name="table-header"
    header-cell-class-name="table-header-cell"
    row-class-name="table-row"
    row-key="id"
    stripe
    :row-style="rowStyleFunc"
    @row-click="tableRowClick"
  >
    <el-table-column
      v-for="(colItem, colIndex) of columnData"
      :key="colItem.id"
      :type="colItem.type"
      :prop="colItem.key"
      :label="colItem.label"
      :width="colItem.width"
      align="center"
      :show-overflow-tooltip="colItem.key !== 'xmjbqk'"
    >
      <template v-if="colItem.key == 'xmfd'" #default="{ row }">
        <span
          :style="{ color: projectLevelArr.find(x => x.value === row[colItem.key]) && projectLevelArr.find(x => x.value === row[colItem.key]).color || ''}">
          {{
            row[colItem.key] || '--'
          }}
        </span>
      </template>
      <template v-else-if="colItem.key == 'xmjbqk'" #default="{ row }">
        <el-tooltip
          :content="row[colItem.key]"
          placement="top"
          popper-class="custom-table-cell-tooltip"
        >
          <div class="custom-cell-item">{{ row[colItem.key] || '--' }}</div>
        </el-tooltip>
      </template>
      <template v-else-if="colItem.key == 'phczqk'" #default="{ row }">
        <span
          :style="{ color: vitalizeStatusArr.find(x => x.value === row[colItem.key]) && vitalizeStatusArr.find(x => x.value === row[colItem.key]).color || ''}">
          {{
            row[colItem.key] || '--'
          }}
        </span>
      </template>
      <template v-else #default="{ row }">
        {{ row[colItem.key] || '--' }}
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    class="table-pagination"
    layout="prev, pager, next"
    :total="tablePaginationInfo.total"
    :page-size="tablePaginationInfo.pageSize"
    :current-page="tableCurrentPage"
    small
    @current-change="changeTableCurrentPage"
  />
</template>

<script setup>
import {defineProps, watch, ref, defineEmits} from "vue";

const props = defineProps({
  tableData: {
    type: Array,
    default: () => []
  },
  columnData: {
    type: Array,
    default: () => []
  },
  tablePaginationInfo: { // 接口分页时-table分页信息
    type: Object,
    default: () => {
    }
  },
});

const emit = defineEmits(['changePageNum', 'cameraFlyTo', 'tableRowClick'])

const copyTableData = ref([])
const tableCurrentPage = ref(1)
const projectLevelArr = ref([
  {
    value: '红档项目',
    color: '#f26c6c',
    label: '红档'
  },
  {
    value: '黄档项目',
    color: '#e7981f',
    label: '黄档'
  },
  {
    value: '绿档项目',
    color: '#09ed33',
    label: '绿档'
  }
])
const vitalizeStatusArr = ref([
  {
    value: '未盘活',
    color: '#f26c6c',
    label: '未盘活'
  },
  {
    value: '有效处理',
    color: '#e7981f',
    label: '有效处理'
  },
  {
    value: '已盘活',
    color: '#09ed33',
    label: '已盘活'
  }
])

watch(
  () => props?.tableData,
  (newVal) => {
    copyTableData.value = props?.tableData
  },
  {deep: true}
)

watch(
  () => props?.tablePaginationInfo?.pageNum, // 监听页面变更-接口分页
  (newVal) => {
    tableCurrentPage.value = newVal
  }
)

const changeTableCurrentPage = (page) => {
  tableCurrentPage.value = page
  emit('changePageNum', page)
}

const rowStyleFunc = ({ row, rowIndex }) => { // 行样式回调方法
  return {
    backgroundColor: row.isChoose ? 'rgba(14,129,255,0.3)' : ''
  }
}

const tableRowClick = (row, column, event) => { // 行点击事件
  emit('cameraFlyTo', row)
  emit('tableRowClick', row)
}

</script>

<style scoped lang="less">
.main-table {
  background-color: transparent;
  height: 100%;

  /deep/ .table-header {
    background: linear-gradient(180deg, #2586EE 0%, rgba(37, 134, 238, 0.6) 100%);

    .table-header-cell {
      background-color: transparent;
      color: white;
      border-bottom: 0;
      font-weight: bolder;
    }
  }

  /deep/ .table-row {
    background: #092140;
    cursor: pointer;

    .el-table__cell {
      border-bottom: 0;
      padding-bottom: 0;
      color: white;
      font-size: 12px;
      padding-top: 0;

      .cell {
        //line-height: 20px;
      }
    }
  }

  /deep/ .el-table__row--striped {
    background: transparent;

    .el-table__cell {
      background-color: transparent !important;
    }
  }

  /deep/ .table-row:hover {
    .el-table__cell {
      background: transparent;
    }
  }

  ::v-deep .el-table__body {
    //-webkit-border-horizontal-spacing: 13px;  // 水平间距
    -webkit-border-vertical-spacing: 5px; // 垂直间距
  }

  /deep/ .el-table__inner-wrapper:before {
    height: 0;
  }

  /deep/ .el-popper {
    border: none;
    background: #1C5BCC;
    .el-popper__arrow::before {
      border: none;
      background: #1C5BCC;
    }
  }

  .custom-cell-item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.table-pagination {
  display: flex;
  justify-content: center;

  /deep/ button {
    background-color: transparent;
    color: white;
  }

  /deep/ button:disabled {
    color: gray;
  }

  /deep/ ul li:not(.is-active) {
    color: white;
  }

  /deep/ ul li {
    background-color: transparent;
  }
}
</style>
<style lang="less">
.custom-table-cell-tooltip {
  border: none !important;
  background: #1C5BCC !important;
  > span:first-child {
    white-space: pre-wrap;
  }
  .el-popper__arrow::before {
    border: none !important;
    background: #1C5BCC !important;
  }
}
</style>